<template>
<div class="shouru_page">
    <div class="content" v-if="dataArrs[0].data">
        <div class="top">
            <div class="top_t">
                <div class="hezi">
                    <p>今年</p>
                    <p>￥<span>{{dataArrs[0].data.year}}</span></p>
                </div>
                 <div class="hezi">
                    <p>总收入</p>
                    <p>￥<span>{{dataArrs[0].data.total}}</span></p>
                </div>
            </div>
            <div class="top_b">
                <p>同比 <span>{{dataArrs[0].data.contrast}}</span></p>
            </div>
        </div>

        <div class="down">
            <div class="title">
               <div class="img">
                   <img :src="require('../../assets/images/kehu/tongji.png')" alt="">
               </div>
                收入统计   
            </div>
            <div class="box" v-for="(item,index) in dataArrs[0].data.list" :key="index">
                <div class="l">{{item.year}}年</div>
                <div class="l">{{item.income}}</div>
            </div> 
        </div>
       
    </div>

    <div v-else> 暂无消息 </div>
</div>
    
</template>

<script>
export default {
    props:['dataArrs']

}
</script>

<style lang="less" scoped>
    .content{
        width: 344px;
        background-color: #fff;
        margin: 10px auto 0;
        padding-bottom: 37px;
        .top{
            width: 344px;
            height: 127px;
            padding: 20px;
             box-sizing: border-box;
            .top_t{
                display: flex;
                .hezi{
                    width: 50%;
                    height: 50px;
                    border-right: 1px solid #000;
                    &:nth-of-type(2){border-right: 0;margin-left: 20px;}
                    p{
                        color: #999999;
                        span{
                            font-size: 24px;
                            
                        }
                        margin-left: 5px;
                        &:nth-of-type(2){
                            margin-top: 16px;
                            color: #ffcc33;
                        }
                    }
                     
                   
                }
            }
            .top_b{
                width: 94px;
                height: 26px;
                background-color: #f5f5f5;
                margin-top: 20px;
                line-height: 26px;
                text-align: center;
                 margin-left: 5px;
                 p{
                     font-size: 14px;
                     span{
                         color: #3e5aa7;
                     }
                 }
            }
        }
        .down{
            width: 344px; 
            background-color: #fff;
            .title{
                height: 64px;
                line-height: 64px;
                display: flex;
                align-items: center;
                padding-left:18px;
                 color: #999999;
                .img{
                    width: 21px;
                    height: 21px;
                    margin-right: 10px;
                    // border: 1px solid #000;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
          
            }
            .box{
                width: 100%;
                height: 34px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px dashed #ddd;
                padding: 0 18px;
                box-sizing: border-box;
                line-height: 34px;
                .l{
                     color: #999999;
                    &:nth-of-type(2){
                        color: #ffcc33;
                    }
                }
            }

        }
    }

</style>